<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>鲜花详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=0">
    <!-- 电话号码不被显示为超链接 -->
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" href="./static/css/animate.css">
    <link rel="stylesheet" href="./static/css/com.css">
    <link rel="stylesheet" href="./static/css/xiala.css">
    <link rel="stylesheet" href="./static/css/goods-type.css">

    <style>
        .root {
            display: none;
        }
        
        .list span {}
        
        .list dd {
            height: 50px;
            width: 200px;
            background: transparent;
        }
        
        .list dd a {
            font-size: 22px;
            text-align: center;
            line-height: 50px;
            background: transparent;
        }
    </style>
</head>

<body>
    <div id='app'>

        <hea-controll :icon_json='heaIconJson' @right1='right1' @right2='right2'></hea-controll>

        <!-- 排序规则 -->
        <div class='change-sort-wrap'>
            <div>
                <div>
                    <span>上新</span>
                    <img src="./static/img/icon-up.png" width="12px" height="24px">
                </div>
                <div>
                    <span>价格</span>
                    <img src="./static/img/icon-sort-down.png" width="12px" height="24px">
                </div>
                <div>
                    <span>销量</span>
                    <img src="./static/img/icon-up.png" width="12px" height="24px">
                </div>
                <div id='type-open-ani-btn'>
                    <span>种类</span>
                    <img src="./static/img/icon-solid-down.png" width="20px" height="10px">
                </div>
            </div>

        </div>

        <!-- 排序规则 -->

        <!-- 动效种类展开 -->
        <div id='type-ani' style="display: none;position: fixed;top: 140px;right: 0;z-index: 100;">
            <dl class="list sashimi open" style="transform: perspective(1200px);margin:0;position:initial;top:0;">
                <!-- <dt>sdfasd</dt> -->
                <span class="node root" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: swing-out 5.6s ease-in-out 0s 1 normal forwards running;"><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold-first 0.5s ease-in-out 0s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="">Maguro</a><span class="face over" style="transform: translateZ(0.1px); background: transparent; opacity: 0; animation: unfold-over 0.225s ease-in-out 0.4s 1 normal forwards running;"></span>
                <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(115, 200, 169,.5); transform: translateZ(-0.1px);"></span>
                </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 0.4s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="">Toro</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 0.8s 1 normal forwards running;"></span>
                <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(115, 200, 169,.5); transform: translateZ(-0.1px);"></span>
                </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 0.8s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="">Ebi</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 1.2s 1 normal forwards running;"></span>
                <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(115, 200, 169,.5); transform: translateZ(-0.1px);"></span>
                </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 1.2s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="">Saba</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 1.6s 1 normal forwards running;"></span>
                <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(115, 200, 169,.5); transform: translateZ(-0.1px);"></span>
                </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 1.6s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="">Ika</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 2s 1 normal forwards running;"></span>
                <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(115, 200, 169,.5); transform: translateZ(-0.1px);"></span>
                </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 2s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="">Tako</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 2.4s 1 normal forwards running;"></span>
                <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(115, 200, 169,.5); transform: translateZ(-0.1px);"></span>
                </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 2.4s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="">Tomago</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 2.8s 1 normal forwards running;"></span>
                <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(115, 200, 169,.5); transform: translateZ(-0.1px);"></span>
                </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 2.8s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="">Kani</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 3.2s 1 normal forwards running;"></span>
                <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(115, 200, 169,.5); transform: translateZ(-0.1px);"></span>
                </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 3.2s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="">Katsuo</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 3.6s 1 normal forwards running;"></span>
                <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(115, 200, 169,.5); transform: translateZ(-0.1px);"></span>
                </dd><span class="node" style="transform-origin: 50% 0% 0px; transform-style: preserve-3d; animation: unfold 0.5s ease-in-out 3.6s 1 normal forwards running; transform: rotateX(180deg);"><dd style="position: relative; transform-style: preserve-3d; transform: translateZ(-0.1px);"><a href="">Maguro</a><span class="face over" style="transform: translateZ(0.1px); background: rgba(0, 0, 0, 0.12); opacity: 0; animation: unfold-over 0.225s ease-in-out 3.6s 1 normal forwards running;"></span>
                <span class="face back" style="background: none 0% 0% / auto repeat scroll padding-box border-box rgba(115, 200, 169,.5); transform: translateZ(-0.1px);"></span>
                </dd>
                </span>
                </span>
                </span>
                </span>
                </span>
                </span>
                </span>
                </span>
                </span>
                </span>
                </span>
            </dl>
        </div>
        <!-- 动效种类展开 -->

        <!-- 商品 -->
        <div class='goods-all-wrap'>
            <goods-info :goods_info='goodsInfo'></goods-info>
        </div>
        <!-- 商品 -->

    </div>

    </div>
    <script src="./static/js/com.js"></script>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/makisu.js"></script>
    <script src='./static/js/vue.min.js'></script>
    <script src="./component/com/header.js"></script>
    <script src="./component/com/goodsInfo.js"></script>
    <script src="./static/js/vue-service-goods-type.js"></script>
</body>

</html>